<template>
  <view class="home">
    <swiper class="scroll" vertical :current="current" @change="handleScrollChange">
      <swiper-item>
        <home-page1 class="scroll-item"></home-page1>
      </swiper-item>
      <swiper-item>
        <home-page2 class="scroll-item"></home-page2>
      </swiper-item>
      <swiper-item>
        <home-page3 class="scroll-item"></home-page3>
      </swiper-item>
      <swiper-item>
        <home-page4 class="scroll-item"></home-page4>
      </swiper-item>
    </swiper>
    <!-- 底部导航 -->
    <view class="footer">
      <view class="footer-item blur-bg" @click="goToPage()">
        <view>
          <image style="width: 59rpx; height: 59rpx" src="@/reservation-images/twitter.png" mode="widthFix"></image>
        </view>
        <view>了解飞鹤</view>
      </view>
      <view class="footer-item blur-bg" @click="goToPage('/reservation/subscribe/index')">
        <view>
          <image src="@/reservation-images/briefcase.png" mode="widthFix"></image>
        </view>
        <view>现在预约</view>
      </view>
      <view class="footer-item blur-bg" @click="goToPage('/reservation/record/index')">
        <view>
          <image src="@/reservation-images/calendar.png" mode="widthFix"></image>
        </view>
        <view>预约记录</view>
      </view>
    </view>
    <!-- 底部箭头 -->
    <view class="footer-down" @click="changeCurrent" v-if="current < 3">
      <image src="@/reservation-images/icon-down.svg" mode="widthFix"></image>
    </view>
  </view>
</template>

<script setup>
import {
  getOpenid,
} from '@/api/reservation'
import homePage1 from './page1.vue'
import homePage2 from './page2.vue'
import homePage3 from './page3.vue'
import homePage4 from './page4.vue'
import { ref, onMounted } from 'vue'

const current = ref(0) // 当前页码

onMounted(() => {
  // 获取openid
  uni.login({
    success: (res) => {
      getOpenid({
        code: res.code,
      }).then((res) => {
        console.log(res, 'res')
        let { openid = '', unionid = '' } = res.data
        uni.setStorageSync('reservation_openid', openid)
        uni.setStorageSync('reservation_unionid', unionid)
      })
    },
  })
})

const changeCurrent = () => {
  if (current.value >= 3) {
    current.value = 0
  } else {
    current.value++
  }
}

const handleScrollChange = (e) => {
  console.log(e)
  current.value = e.detail.current
}

const goToPage = (path) => {
  if (!path) return
  uni.navigateTo({
    url: path,
  })
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
